<template>
  <div>
    <el-dialog
      v-model="data.projectDialog"
      width="60%"
      top="10vh"
      title="中咨项目列表"
      @close="closeDialog"
    >
      <div class="table">
        <!-- <el-input
          v-model="params.keyWord"
          placeholder="关键字搜索"
          style="width: 200px; margin-right: 15px"
        />
        <el-button class="ordinary" @click="search()">搜索</el-button> -->
        <Table
          :hasOperate="true"
          :loading="data.isLoading"
          :table-arr="data.allTableData"
          :columns="data.columns"
          @rowClick="getCurrentRow"
        >
          <!-- <template #status>
            <el-table-column label="状态" width="50">
              <template #default="scope">
                <span v-if="projectCategory == 1" :class="scope.row.zpstate == 1 ? '' : 'error'">{{
                  scope.row.zpstate == 1 ? '正常' : '停用'
                }}</span>
                <span v-if="projectCategory == 2" :class="scope.row.zstate == 1 ? '' : 'error'">{{
                  scope.row.zstate == 1 ? '正常' : '停用'
                }}</span>
              </template>
            </el-table-column>
          </template> -->
        </Table>
        <div class="example-pagination-block">
          <el-pagination
            background
            v-model:current-page="params.page"
            v-model:page-size="params.pageSize"
            layout="prev, pager, next ,total,sizes,jumper"
            :total="data.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { getZhongziProject } from '@/views/project/api/commom'
import Table from '@/views/project/components/table-dialog/table.vue'
import tableData from './tableHeader.json'
import { useStore } from 'vuex'

import { defineComponent, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default defineComponent({
  components: {
    Table,
  },
  props: {
    projectCategory: {
      type: Number,
    },
  },
  emits: {
    closeDialog: null,
    getProject: null,
  },
  setup(props, { emit }) {
    const data = reactive({
      projectDialog: true,
      allTableData: [],
      isLoading: false,
      columns: tableData.zzProjectHeader,
      currentList: [],
      ids: [],
      total: 1000,
    })
    const store = useStore()
    const params = reactive({
      sysSource: 'test',
      reqTime: '20231220184400',
      dwbs: '111',
      startTime: '',
      endTime: '',
      page: '1',
      pageSize: '10',
    })
    const getCurrentRow = (row) => {
      emit('getProject', row)
    }
    const onSearch = async () => {
      data.isLoading = true
      getZhongziProject(params)
        .then((res) => {
          data.isLoading = false
          data.allTableData = res.data.Data.map((item) => {
            let projectInfo = {} as any
            projectInfo = { ...item.projectMasterInfoMap }
            projectInfo.units = item.detail1
            projectInfo.person = item.detail2
            projectInfo.investment = item.ProjectFunds
            return projectInfo
          })
          console.log(data.allTableData, 'data.allTableData')
          data.total = res.data.count
        })
        .catch((err) => {
          console.log(err)
          data.isLoading = false
          data.allTableData = []
        })
    }
    onSearch()
    const search = () => {
      params.page = '1'
      onSearch()
    }
    const handleCurrentChange = (e) => {
      console.log(e, 'handleCurrentChange')
      params.page = e
      onSearch()
    }
    //改变页数限制
    const handleSizeChange = (e) => {
      console.log(e, 'handleSizeChange')
      params.pageSize = e
      onSearch()
    }
    const closeDialog = () => {
      console.log('closeDialog')
      emit('closeDialog', false)
    }
    return {
      data,
      params,
      search,
      closeDialog,
      getCurrentRow,
      handleCurrentChange,
      handleSizeChange,
    }
  },
})
</script>

<style scoped>
.el-table {
  height: 250px;
}
.error {
  color: brown;
}
</style>
